<template>
  <div class="search">
    <div class="search-box">
      <div class="search-box-ele">
        <el-input :clearable="true" placeholder="搜索音乐、歌手、歌词、用户" @blur="" v-model="searchkey" @keyup.enter.native="search(searchkey)"></el-input>
        <el-button icon="el-icon-search" plain @click="search(searchkey)"></el-button>
      </div>
      <div class="search-box-result" v-show="searchkey!=''&&resultall==false">
        <div class="search-box-result-key" v-show="searchkey!=''" @click="search(searchkey)">搜索"{{searchkey}}"</div>
        <div class="search-box-result-con" v-show="resultprese">
          <ul>
            <li v-for="(item,index) in searchadvise" :key="index" @click="selecthot(item.name)">
              <i class="el-icon-search"></i>
              <span v-for="val in item.artists" :key="val.id">{{val.name}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              {{item.name}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="search-con">
      <div class="search-con1 clearfix" v-show="!resultall">
        <div class="search-hot">
          <div class="search-con1-title"><span>热门搜索</span><i>&nbsp;</i></div>
          <div class="search-hot-content myScrollBar clearfix">
            <ul>
              <li v-for="(item,index) in hotsearchlist" :key="index" @click="selecthot(item.first)">{{item.first}}</li>
            </ul>
          </div>
        </div>
        <div class="search-history">
          <div class="search-con1-title"><span>搜索历史</span><i class="el-icon-delete" @click="deletehistory"></i></div>
          <div class="search-history-content clearfix">
            <el-scrollbar>
              <ul>
                <li v-for="(item,index) in searchhistory" :key="index">
                  <span @click="selecthot(item)">{{item}}</span>
                  <i class="el-icon-close" @click="deletehistoryitem(index)"></i>
                </li>
              </ul>
            </el-scrollbar>
            <span class="nonetext" v-show="searchhistory==''">暂无搜索历史</span>
          </div>
        </div>
      </div>
      <div class="search-con2" v-show="resultall">
        <div class="main">
          <el-tabs value="1">
            <el-tab-pane label="单曲" name="1" v-loading="result_songs==''">
              <el-scrollbar>
                <div class="result_songs">
                  <ul>
                    <li class="love-music-list" v-for="(item,index) in result_songs" :key="index" @dblclick="playmusic(item)">
                      <div class="music-list-song">
                        <p>{{item.name}}</p>
                        <p>{{item.alias[0]}}</p>
                      </div>
                      <div class="music-list-singer ellipsis">{{item.artists[0].name}}</div>
                      <div class="music-list-album ellipsis"><p class="ellipsis">{{item.album.name}}</p></div>
                      <div class="music-list-time">{{item.duration | filterTime}}</div>
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="歌手" name="2" v-loading="result_singer==''">
              <el-scrollbar>
                <div class="result_singer">
                  <ul>
                    <li v-for="item in result_singer" :key="item.id" @click="$router.push({path:'singerd',query:{id:item.id}})">
                      <img v-lazy="item.img1v1Url" />
                      <span>{{item.name}}</span>
                      <span v-show="item.alias!=''">({{item.alias[0]}})</span>
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="专辑" name="3">
              <el-scrollbar>
                <div class="result_zj">
                  <ul>
                    <li v-for="item in result_zj" :key="item.id" @click="$router.push({path:'albumd',query:{id:item.id}})">
                      <div class="result_zj_left">
                        <img v-lazy="item.blurPicUrl" />
                        <span>{{item.name}}</span>
                      </div>
                      <div class="result_zj_right">
                        <span>{{item.artists[0].name}}</span>
                        <span v-show="item.artist.alia!=''">({{item.artist.alia[0]}})</span>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="MV" name="4">
              <el-scrollbar>
                <div class="result_mv">
                  <ul>
                    <li v-for="item in result_mv" :key="item.id" class="imgli">
                      <div class="result_mv_img">
                        <img v-lazy="item.cover">
                        <span class="playnum"><i class="el-icon-video-camera"></i>
                          <span v-show="item.playCount>=100000">{{item.playCount | filterPlayCount}}</span>
                          <span v-show="item.playCount<100000">{{item.playCount}}</span>
                        </span>
                        <span class="playtime">{{item.duration | filterTime}}</span>
                      </div>
                      <div class="result_mv_text ellipsis">
                        <p class="ellipsis">{{item.name}}</p>
                        <p>{{item.artistName}}</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="歌单" name="5" v-loading="result_songlist==''">
              <el-scrollbar>
                <div class="result_songlist">
                  <ul>
                    <li v-for="(item,index) in result_songlist" :key="index" @click="$router.push({path:'songlistd',query:{id:item.id}})">
                      <span><img v-lazy="item.coverImgUrl"></span>
                      <span>{{item.name}}</span>
                      <span>{{item.trackCount}}首</span>
                      <span>by&nbsp;&nbsp;&nbsp;{{item.creator.nickname}}</span>
                      <span>播放：
                        <span v-show="item.playCount>=100000">{{item.playCount | filterPlayCount}}</span>
                        <span v-show="item.playCount<100000">{{item.playCount}}</span>
                      </span>
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </el-tab-pane>
            <el-tab-pane label="主播电台" name="6">
              <el-scrollbar>
                <div class="result_dj">
                  <ul>
                    <li></li>
                  </ul>
                </div>
              </el-scrollbar>
              <span class="nonetext" v-show="result_dj==''">暂无搜索结果</span>
            </el-tab-pane>
            <el-tab-pane label="用户" name="7">
              <el-scrollbar>
                <div class="result_user">
                  <ul>
                    <li v-for="(item,index) in result_user" :key="index">
                      <span><img v-lazy="item.avatarUrl"></span>
                      <span>{{item.nickname}}</span>
                      <span>
                        <i class="" :class="item.gender===2?'el-icon-male':'el-icon-female'"></i>
                        <i class=""></i>
                      </span>
                    </li>
                  </ul>
                </div>
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getHotSearch,
    getSearchAdvise,
    getSearchResult
  } from '@/api/api'
  import storage from '@/storage/storage' // 调用本地储存localStorage
  export default {
    name: 'home',
    data() {
      return {
        searchkey: '', //搜索关键词
        resultprese: false, //搜索框预选结果显示
        resultall: false, //回车搜索之后的结果显示
        timer: null,
        hotsearchlist: [], //热门搜索列表
        searchhistory: [], //搜索历史
        searchadvise: [], //搜索建议

        result_songs: [], //搜索结果 --单曲
        result_singer: [], //搜索结果 --歌手
        result_zj: [], //搜索结果 --专辑
        result_mv: [], //搜索结果 --MV
        result_songlist: [], //搜索结果 --歌单
        result_dj: [], //搜索结果 --主播电台
        result_user: [], //搜索结果 --用户
      }
    },
    methods: {
      // 播放音乐
      playmusic(item){
        this.$store.commit("GET_MUSIC_URL",item.id);
        this.$store.commit("GET_MUSIC_INFO",item.id);
      },
      // 搜索
      search(searchkey) {
        if (searchkey != '') {
          this.resultall = true;
          this.resultprese = false;

          //把当前搜索关键词存储到本地
          this.searchhistory.unshift(searchkey);
          storage.setStorage('searchhistory', this.searchhistory);

          //调用方法之前，把上一次搜索的结果清空
          this.result_songs = "";
          this.result_singer = "";
          this.result_zj = "";
          this.result_mv = "";
          this.result_songlist = "";
          this.result_dj = "";
          this.result_user = "";

          // 调用api方法
          this._getresult(searchkey);

          // 调用数组去重的方法，清除历史记录里面的重复关键字
          this._getlocalstorage();
        }else{
          this.$message({
            message: '请输入搜索关键词',
            type: 'warning'
          });
        }

      },
      //删除搜索历史
      deletehistory() {
        if (this.searchhistory != "") {
          this.$confirm('清空所有搜索历史记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 清空储存的所有值
            storage.removeStorage('searchhistory');
            this._getlocalstorage();

            this.$message({
              type: 'success',
              message: '清空成功!'
            });

          }).catch(() => {

            this.$message({
              type: 'info',
              message: '取消清空'
            });

          });
        }

      },
      // 删除某条历史记录
      deletehistoryitem(index) {
        this.searchhistory.splice(index, 1);
        // console.log(this.searchhistory);
        storage.setStorage('searchhistory', this.searchhistory);
      },

      // 点击热门搜索
      selecthot(val) {
        this.searchkey = val;
        this.search(val);
      },

      // 获取热门搜索关键词
      _gethotsearch() {
        getHotSearch().then(res => {
          if (res.status == 200) {
            this.hotsearchlist = res.data.result.hots;
            // console.log(this.hotsearchlist);
          }
        })
      },

      // 搜索建议下拉框
      _getsearchadvise(keyword) {
        getSearchAdvise(keyword).then(res => {
          if (res.status == 200) {
            this.searchadvise = res.data.result.songs;
            // console.log(this.searchadvise);
          }
        })
      },

      // 搜索结果
      _getresult(keyword) {
        // 单曲
        getSearchResult(keyword, 1).then(res => {
          if (res.status == 200) {
            this.result_songs = res.data.result.songs;
            // console.log(this.result_songs);
          }
        });
        // 歌手
        getSearchResult(keyword, 100).then(res => {
          if (res.status == 200) {
            this.result_singer = res.data.result.artists;
            // console.log(this.result_singer);
          }
        });
        // 专辑
        getSearchResult(keyword, 10).then(res => {
          if (res.status == 200) {
            this.result_zj = res.data.result.albums;
            // console.log(this.result_zj);
          }
        });

        // MV
        getSearchResult(keyword, 1004).then(res => {
          if (res.status == 200) {
            this.result_mv = res.data.result.mvs;
            // console.log(this.result_mv);
          }
        });

        //

        // 歌单
        getSearchResult(keyword, 1000).then(res => {
          if (res.status == 200) {
            this.result_songlist = res.data.result.playlists;
            // console.log(this.result_songlist);
          }
        });

        // 用户
        getSearchResult(keyword, 1002).then(res => {
          if (res.status == 200) {
            this.result_user = res.data.result.userprofiles;
            // console.log(this.result_user);
          }
        });


      },

      // 提取本地的搜索历史数据
      _getlocalstorage() {
        // 把本地储存的搜索历史显示出来
        var list = storage.getStorage('searchhistory');
        if (list) {
          this.searchhistory = Array.from(new Set(list));  //数组去重
        } else {
          this.searchhistory = [];
        }
        // console.log(list);
        // console.log(this.searchhistory);
      },

      // 解决搜索记录重复的问题
      _solvehistory(){

      }


    },
    watch: {
      // 监听输入框值得变化
      searchkey(newvalue, oldvalue) {
        if (newvalue == '') {
          this.resultall = false;
        }
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          if (newvalue == '') {
            this.resultprese = false;
          } else {
            this.searchadvise = '';
            this._getsearchadvise(newvalue);
            this.resultprese = true;
          }
        }, 1000);
      }
    },
    mounted() {
      this._gethotsearch(); //获取热门搜索
      this._getlocalstorage(); //获取搜索记录的值
    },
    activated(){
      this.searchkey = "";
    }
  }
</script>
<style scoped="scoped">
  .search {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 0px 28px;
  }

  .search-box {
    width: 100%;
    height: auto;
    position: relative;
    margin: 18px 0;
  }

  .search-box-ele {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;

  }

  .search-box>>>.el-input__inner {
    width: 100%;
    height: 44px;
    border: 1px solid #e4e4e7;
    border-radius: 0;
    border-right: 0;
    padding: 0px 10px;
  }

  .search-box>>>.el-button {
    height: 44px;
    border: 1px solid #e4e4e7;
    border-radius: 0;
    border-left: 0;
    padding: 12px 10px;
    color: #CCCCCC;
    cursor: default;
  }

  .search-box>>>.el-button:active {
    color: #ccc;
    background-color: #FFFFFF;
  }

  .search-box>>>.el-button:hover {
    color: #ccc;
    background-color: #FFFFFF;
  }

  .search-box-result {
    position: absolute;
    width: 100%;
    height: auto;
    top: 44px;
    left: 0;
    border: 1px solid #E8E8EA;
    border-top: 0;
    background-color: #fff;
    z-index: 100;
  }

  .search-box-result .search-box-result-key {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E8E8EA;
    font-size: 15px;
    color: #1a5a99;
    padding: 0px 10px;
  }

  .search-box-result .search-box-result-con {
    width: 100%;
    height: auto;
  }

  .search-box-result-con>ul>li {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    font-size: 15px;
    color: #333333;
  }

  .search-box-result-con>ul>li:not(:last-child) {
    border-bottom: 1px solid #E8E8EA;
  }

  .search-box-result-con>ul>li>i {
    color: #d4d4d4;
    margin-right: 10px;
  }

  .search-box-result-con>ul>li:hover {
    background-color: #F2F2F3;
  }

  .search-con {
    position: absolute;
    width: 100%;
    top: 80px;
    bottom: 0px;
    left: 0;
    right: 0;
    padding: 0px 28px;
  }

  .search-con1 {
    width: 100%;
    height: 100%;
  }

  .search-hot {
    width: 48%;
    height: 100%;
    float: left;
    position: relative;
  }

  .search-history {
    width: 48%;
    height: 100%;
    float: right;
    position: relative;
  }

  .search-con1-title {
    width: 100%;
    height: auto;
    line-height: 35px;
    font-size: 15px;
    color: #666666;
    border-bottom: 1px solid #E4E4E7;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .search-con1-title i {
    font-size: 18px;
    color: #666;
  }

  .search-hot-content,
  .search-history-content {
    width: 100%;
    position: absolute;
    top: 36px;
    bottom: 0;
    overflow-y: auto;
    /* overflow-y: overlay; */
  }

  .search-hot-content ul>li {
    float: left;
    padding: 2px 10px;
    border: 1px solid #cacacb;
    border-radius: 20px;
    margin-right: 8px;
    margin-top: 15px;
    font-size: 13px;
  }

  .search-history-content {
    padding: 10px 0;
  }

  .search-history-content ul>li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

  }

  .search-history-content ul>li>span {
    flex: 1;
    padding: 10px 0px;
  }

  .search-history-content ul>li>i {
    font-size: 18px;
    color: #666;
  }

  .search-con2 {
    width: 100%;
    height: 100%;
  }

  .search-con2 .main {
    top: 0px;
  }


  .result_songs,
  .result_singer,
  .result_zj,
  .result_dj,
  .result_mv,
  .result_user,
  .result_songlist {
    padding: 20px 0px;
  }

  /* 搜索结果单曲 */
  .result_songs ul li {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 5px 12px;
  }

  .result_songs ul li:nth-of-type(2n-1) {
    background-color: #f4f4f6;
  }

  .result_songs ul li:hover {
    background-color: #F2F2F3;
  }

  .result_songs ul li div {
    display: flex;
    align-items: center;
    font-size: 12px;
    height: 100%;
    line-height: 44px;
  }

  .result_songs ul li .music-list-song {
    flex: 1;
    font-size: 14px;
    display: block;
    line-height: 28px;
  }

  .result_songs ul li .music-list-song>p:nth-of-type(1) {
    color: #000;
  }

  .result_songs ul li .music-list-song>p:nth-of-type(2) {
    font-size: 12px;
    color: #999999;
  }

  .result_songs ul li .music-list-singer {
    flex: 0.8;
    color: #1A5A99;
  }

  .result_songs ul li .music-list-album {
    flex: 0.5;
    color: #999999;
  }

  .result_songs ul li .music-list-time {
    flex: 0.2;
    color: #999999;
  }

  /* 歌手 */
  .result_singer ul li {
    display: flex;
    width: 100%;
    height: auto;
    padding: 10px 12px;
    align-items: center;
  }

  .result_singer ul li:nth-of-type(2n-1) {
    background-color: #f4f4f6;
  }

  .result_singer ul li:hover {
    background-color: #F2F2F3;
  }

  .result_singer ul li img {
    width: 48px;
    height: 48px;
  }

  .result_singer ul li span {
    padding-left: 10px;
  }
  .result_singer ul li span:nth-of-type(1){
    color: #1A5A99;
  }

  /* 专辑 */
  .result_zj ul li {
    display: flex;
    align-items: center;
    padding: 10px 12px;
  }

  .result_zj ul li div {
    flex: 1;
  }

  .result_zj ul li .result_zj_left {
    display: flex;
    align-items: center;
  }

  .result_zj ul li .result_zj_left img {
    width: 48px;
  }

  .result_zj ul li .result_zj_left span {
    padding-left: 10px;
  }

  .result_zj ul li .result_zj_right {
    color: #1A5A99;
    font-size: 12px;
  }

  .result_zj ul li:nth-of-type(2n-1) {
    background-color: #f4f4f6;
  }

  .result_zj ul li:hover {
    background-color: #F2F2F3;
  }

  /* MV */
  .result_mv{
    width: 100%;
  }
  .result_mv ul{
    display: flex;
    flex-wrap: wrap;
  }
  .result_mv ul li{
    width: 179px;
    height: auto;
    margin-left: 7px;
    margin-bottom: 20px;
  }
  .result_mv ul li:nth-of-type(9n-8){
    /* margin-left: 0; */
  }
  .result_mv ul li .result_mv_img{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
  }
  .result_mv ul li .result_mv_img img{
    display: block;
    width: 100%;
  }
  .result_mv ul li .result_mv_text{
    padding: 5px 0;
  }

  .result_mv ul li .result_mv_text p{
    line-height: 24px;
    color: #333;
  }
  .result_mv ul li .result_mv_text p:nth-of-type(2){
    font-size: 12px;
    color: #1A5A99;
  }

  /* 歌单 */
  .result_songlist ul li{
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 12px;
    color: #999999;
  }
  .result_songlist ul li img{
    width: 48px;
    height: 48px;
    display: block;
  }
  .result_songlist ul li:nth-of-type(2n-1) {
    background-color: #f4f4f6;
  }

  .result_songlist ul li:hover {
    background-color: #F2F2F3;
  }
  .result_songlist ul li span:nth-of-type(1){

  }
  .result_songlist ul li>span:nth-of-type(2){
    padding-left: 10px;
    font-size: 14px;
    color: #000000;
    flex: 1;
  }
  .result_songlist ul li span:nth-of-type(3){
    flex: 0.3;
  }
  .result_songlist ul li span:nth-of-type(4){
    flex: 0.3;
  }
  .result_songlist ul li span:nth-of-type(5){
    flex: 0.3;
  }
  /* 主播电台 */

  /* 用户 */
  .result_user ul li{
    display: flex;
    align-items: center;
    padding: 10px;
  }
  .result_user ul li img{
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    display: block;
  }
  .result_user ul li span:nth-of-type(2){
    margin-left: 10px;
    color: #1A5A99;
  }
  .result_user ul li:nth-of-type(2n-1) {
    background-color: #f4f4f6;
  }

  .result_user ul li:hover {
    background-color: #F2F2F3;
  }
</style>
